<script>
import ApartmentForm from '../ApartmentForm/ApartmentForm.vue'
import DialogContent from "@/components/DialogContent/index.vue"
import { addDorm } from '@/api/dorm'
export default {
  components: {
    ApartmentForm,
    DialogContent
  },
  props: {
    value: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      form: {
        address: '',
        number: 1,
        rent: 0,
        photos: []
      },
      isSubmitting: false,
      // dialogContentHeight: 0
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(visible) {
        this.$emit('input', visible)
      }
    },
    isActionDisabled() {
      return this.isSubmitting
    },
    // dialogContentStyle(){
    //   return {
    //     height: this.dialogContentHeight < 400 ? `${this.dialogContentHeight}px` : `400px`,
    //     overflow: this.dialogContentHeight > 400 ? 'auto' : 'visible'
    //   };
    // }
  },
  watch: {
    form(v) {
      console.log('change', v)
    }
  },
  methods: {
    sleep(t) {
      return new Promise(r => setTimeout(r, t))
    },
    handleClose() {
      if (this.isActionDisabled) return
      this.dialogVisible = false
    },
    async handleConfirm() {
      try {
        const flag = await this.$refs.form?.validate()
        if (!flag) return

        this.isSubmitting = true
        await this.sleep(300)

        const params = this.buildParams()
        const result = await addDorm(params)

        if (result.code !== 201) { throw new Error(result?.data?.message ?? '创建失败') }

        this.isSubmitting = false
        this.$emit('success', result)
                this.$refs.form?.resetFields()
      } catch (e) {
        this.isSubmitting = false
        this.$emit('failed', e)
      }
    },
    buildParams() {
      const { address, rent, photos, number } = this.form

      const params = new FormData()
      params.append('address', address)
      params.append('rent', rent)
      params.append('number', 0)
      params.append('photo', JSON.stringify(photos))

      return params
    },
    // handleDialogClose(){
    //   //this.dialogContentHeight = 0;
    // },
    // handleDialogOpen(){
    //   this.$nextTick(()=>{
    //     this.dialogContentHeight = this.$refs.dialogContent.scrollHeight;
    //     console.log(this.$refs.dialogContent.scrollHeight,'height');
    //   })
    // }
  }
}
</script>

<template>
  <div class="create-apartment">
    <DialogContent title="添加宿舍" :visible.sync="dialogVisible" width="30%"
    :close-on-click-modal="false" :before-close="handleClose">
      <ApartmentForm ref="form" v-model="form" :disabled="isActionDisabled" />
      <div slot="footer" class="dialog-footer">
          <el-button :disabled="isSubmitting" @click="handleClose">取 消</el-button>
          <el-button type="primary" :loading="isSubmitting" :disabled="isSubmitting" @click="handleConfirm">确 定</el-button>
        </div>
    </DialogContent>
    <!-- <el-dialog title="添加宿舍" :visible.sync="dialogVisible" width="30%" @open="handleDialogOpen"
    :close-on-click-modal="false" :before-close="handleClose" @close="handleDialogClose">
      <div class="dialog-content" :style="dialogContentStyle" ref="dialogContent">
        <div slot="footer" class="dialog-footer">
          <el-button :disabled="isSubmitting" @click="handleClose">取 消</el-button>
          <el-button type="primary" :loading="isSubmitting" :disabled="isSubmitting" @click="handleConfirm">确 定</el-button>
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>

<style lang="scss"></style>
